﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> my final move page,^_^ </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#box{position:absolute}
.t_left{background:transparent url(images/lay/top_left.png) repeat scroll 0 0;width:13px;}
.t_center{background:transparent url(images/lay/top_center.png) repeat-x scroll 0 0;}
.t_right{background:transparent url(images/lay/top_right.png) repeat scroll 0 0;width:13px;}
.m_left{background:transparent url(images/lay/left.png) repeat-y scroll 0 0;}
.m_center{background:#FFFFFF none repeat scroll 0 0;width:497px;height:293px;}
.m_right{background:transparent url(images/lay/right.png) repeat-y scroll 0 0;}
.b_left{background:transparent url(images/lay/bottom_left.png) no-repeat scroll 0 0;}
.b_center{background:transparent url(images/lay/bottom_center.png) repeat-x scroll 0 0;}
.b_right{background:transparent url(images/lay/bottom_right.png) no-repeat scroll 0 0;}
</style>
</HEAD>

<BODY>
<table onmousedown="drag(this,event)" id="box" cellspacing="0" cellpadding="0">
	<tr id="t_box"><td class="t_left">&nbsp;</td><td class="t_center">the title</td><td class="t_right">&nbsp;</td></tr>
	<tr id="m_box"><td class="m_left">&nbsp;</td><td class="m_center">some test</td><td class="m_right">&nbsp;</td></tr>
	<tr id="b_box"><td class="b_left">&nbsp;</td><td class="b_center">&nbsp;</td><td class="b_right">&nbsp;</td></tr>
</table>
<script>
function $(id){return document.getElementById(id)}
function drag(ele,event){
	var e = event||window.event
	var startX = e.clientX,startY = e.clientY;
	var origX = ele.offsetLeft,origY = ele.offsetTop
	var d_x = startX - origX,d_y = startY-origY
	var is_ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1

	if(is_ie){
		ele.setCapture();
		ele.attachEvent('onmousemove',move_fun)
		ele.attachEvent('onmouseup',up_fun)
		ele.attachEvent('onlosecapture',up_fun)
	}else{
		//window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		document.addEventListener('mousemove',move_fun,true)
		document.addEventListener('mouseup',up_fun,true)
	}

	//is_ie ? e.cancelBubble = true  : e.stopPropagation();
	//is_ie ? e.returnValue = false : e.preventDefault();

	function move_fun(event){
		var e = event||window.event
		ele.style.left = (e.clientX - d_x)+'px'
		ele.style.top = (e.clientY - d_y)+'px'

		//is_ie ? e.cancelBubble = true  : e.stopPropagation();
	}

	function up_fun(e){
		var e = event||window.event
		if(is_ie){
			ele.detachEvent('onlosecapture',up_fun)
			ele.detachEvent('onmousemove',move_fun)
			ele.detachEvent('onmouseup',up_fun)
			ele.releaseCapture();
		}else{
			document.removeEventListener('mousemove',move_fun,true)
			document.removeEventListener('mouseup',up_fun,true)
		}

		//is_ie ? e.cancelBubble = true : e.stopPropagation();
	}
}

</script>
</BODY>
</HTML>